<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>填写订单信息</title>
    <link rel="stylesheet" href="settlement/css/index.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>

        .order_box_in {
            width: 400px;
            height: 170px;
            margin-left: 8px;
            margin-bottom: 20px;
            float: left;
            border: 1px solid #C9C5C5;
            border-radius: 5px;
            cursor: pointer;
        }

        .order_box::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <style>
        .order_box_in {
            border: 1px solid #C9C5C5;
            padding: 10px;
        }

        .addressname {
            height: 20px;
            font-weight: bold;
            color: orangered;
            text-align: center;
            font-size: 20px;
            padding: 5px;
        }

        .areatext {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addresstext {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addrname {
            height: 15px;
            color: darkgreen;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }

        .addrtel {
            height: 15px;
            color: dodgerblue;
            text-align: left;
            font-size: 15px;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="order_head">
    <div class="head_background">
        <div class="head_box">
            <a href="index.html" class="head_left_a"><img src="settlement/img/logo.jpg" alt="" class="head_left_p"></a>
            <h1 class="head_h1">确认订单</h1>
            <div class="head_right">
                <span class="head_right_in">1412625918 ∨</span>
                <span class="head_right_in">|</span>
                <a href="" class="head_right_in">我的订单</a>
            </div>

        </div>
    </div>
</div>
<div class="order_body layui-container">
    <div class="order_body_background">
        <div class="order_line">
            <div class="order_lien_in">
                <h3 class="order_title">收货地址</h3>
            </div>
            <div class="order_lien_in"></div>
        </div>
        <div class="layui-row layui-col-space15" name="addressbox">

        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in">
                <h3 class="order_title">商品及优惠券</h3>
            </div>
        </div>
        <div id="products" class="layui-form" lay-filter="products">

        </div>
        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">商品件数:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2" easy="totalnumber">1件</p>
            </div>
        </div>
        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">金额合计:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2" easy="total">899元</p>
            </div>

        </div>
        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">运费:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2">0元</p>
            </div>
        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in">
                <p class="order_price_11"><br>应付总额:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2"><span style="font-size: 35px" easy="total">999</span>元</p>

            </div>
        </div>
        <div class="pay">
            <a href="javascript:;" class="pay_a" id="jiesuanBtn">结算</a>
        </div>
    </div>
</div>

<div class="foot">
    <ul class="foot_ul">
        <li class="foot_li">预约维修服务</li>
        <li class="foot_li">7天无理由退货</li>
        <li class="foot_li">15天免费换货</li>
        <li class="foot_li">满15元包邮</li>
        <li class="foot_li foot_fot">520余家售后网点</li>
    </ul>
    <div class="foot_center">
        <div class="foot_cen_left">
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
            <dl class="foot_dl">
                <dt class="foot_dt">帮助中心</dt>
                <dd class="foot_dd"><a>账户管理</a></dd>
                <dd class="foot_dd"><a>购物指南</a></dd>
                <dd class="foot_dd"><a>订单操作</a></dd>
            </dl>
        </div>
        <div class="foot_cen_right">
            <p class="foot-phone">400-100-5678</p>
            <p class="foot-right-center">周一至周日 8:00-18:00<br>（仅收市话费)</p>
            <a class="foot-right-bottmo" href="">联系客服</a>
        </div>
    </div>
</div>
<div class="fot_bot_max">
    <div class="fot_bot">
        <img src="settlement/img/logo.jpg" class="fot_bot_logo">
        <div class="fot_bot_text">
            <p class="fot_bot_p">
                <a class="fot_bot_a" href="">小米商城</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">MIUI</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">米家</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">米聊</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">多看</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">游戏</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">路由器</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">米粉卡</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">政企服务</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">小米天猫店</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">隐私政策</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">问题反馈</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">廉政举报</a>
                <span class="fot_bot_span">|</span>
                <a class="fot_bot_a" href="">Select Region</a>
            </p>
            <p class="fot_bot_p fot_bot_a1">
                "©"
                <a class="fot_bot_a1" href="">mi.con</a>
                " 京ICP证110507号"
                <a class="fot_bot_a1" href="">京ICP备10046444号</a>
                <a class="fot_bot_a1" href="">京公网安备11010802020134号</a>
                <a class="fot_bot_a1" href="">京网文[2017]1530-131号</a>
                "<br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试"


            </p>
        </div>
        <div class="fot_bot_right">
            <a href="" class="fot_bot_right_img"><img src="settlement/img/foot_01.png" alt=""></a>
            <a href="" class="fot_bot_right_img"><img src="settlement/img/foot_02.png" alt=""></a>
            <a href="" class="fot_bot_right_img"><img src="settlement/img/foot_03.png" alt=""></a>
            <a href="" class="fot_bot_right_img"><img src="settlement/img/foot_04.png" alt=""></a>
            <a href="" class="fot_bot_right_img"><img src="settlement/img/foot_05.png" alt=""></a>
        </div>

    </div>
    <img class="fot_bottom_img" src="settlement/img/foot_06.png">
</div>
<script type="text/html" id="addressitem">
    <div easy="address" class='layui-col-md4'
         style="margin-top:10px;height:120px;border:1px solid orangered;border-radius: 10px;cursor: pointer">
        <div class='addressname' style="">
        </div>
        <div style="margin-top:8px">
            地址:<span class="areatext"></span>
        </div>
        <div class='' style="margin-top:8px;">
            详细地址:<span class="addresstext"></span>
        </div>
        <div class='layui-row' style="margin-top:8px;">
            <div class=' layui-col-md6'>
                联系人:<span class="addrname"></span>
            </div>
            <div class=' layui-col-md6'>
                联系电话:<span class="addrtel"></span>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="addAddress">
    <div class='layui-col-md4' addAddress
         style="margin-top:10px;height:120px;text-align: center;line-height: 120px;font-size: 30px;border-radius: 10px;border:1px solid orangered;cursor: pointer;">
        +
    </div>
</script>
<script id="productitem" type="text/html">
    <div class="layui-row" easy="proitem" style="height:50px;line-height: 50px;">
        <div class="layui-col-md5">
            <input type="hidden" name="id">
            <img easy="proimg" style="height: 18px; width: 27px" src="settlement/img/A4.png"
                 alt=""/>
            <span easy="proname">小米电视A4 32寸 黑色 32 寸</span>
        </div>
        <div class="layui-col-md2">
            <label class="layui-form-label"><span easy="proprice">899</span>元*</label>
            <div class="layui-input-block">
                <input type="text" style="width:40px;" name="number" easy="pronumber" class="layui-input">
            </div>
        </div>

        <div class="layui-col-md4" style="text-align: center;">
            <p easy="subtotal">899元</p>

        </div>
        <div class="layui-col-md1">
            <button type='button' easy="deletebtn"
                    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">删除
            </button>
        </div>
        <hr class="layui-border-orange">
    </div>
</script>
<script src="layui/layui.all.js"></script>
<script th:inline="javascript">
    const $ = layui.$;
    const layer = layui.layer;
    const form=layui.form;
    //显示收货地址
    showAddress();

    function showAddress() {
        $.ajax({
            url: "address/getaddressbyuserid",
            success: function (result) {
                let data = result.data;
                for (let i = 0; i < data.length; i++) {
                    let itemtext = $("#addressitem").text();
                    let $item = $(itemtext);
                    $item.find(".addressname").text(data[i].addressname);
                    $item.find(".areatext").text(data[i].province + "-" + data[i].city + "-" + data[i].area);
                    $item.find(".addresstext").text(data[i].address);
                    $item.find(".addrname").text(data[i].name);
                    $item.find(".addrtel").text(data[i].tel);
                    $item.attr("addressid", data[i].id);
                    if (data[i].isdefault == 1) {
                        selectedAddressID = data[i].id
                        $item.css("background-color", "#8cbf5e");
                    }


                    $("[name='addressbox']").append($item);
                }

                if (data.length < 6) {
                    let itemtext = $("#addAddress").text();
                    let $item = $(itemtext);
                    $("[name='addressbox']").append($item);
                }
            }
        });
    }

    //显示购买商品数据
    const productids =/*[[${productids}]]*/;
    const counts =/*[[${counts}]]*/;
    if (!productids || !counts) {
        layer.msg("系统异常,请重新选购", {icon: 3})
        setTimeout(function () {
            location.href = "shopping/index";
        }, 3000);
    }
    const proidArr = productids.split(",");
    const countArr = counts.split(",");
    if (proidArr.length != countArr.length || proidArr.length == 0 || countArr.length == 0) {
        layer.msg("系统异常,请重新选购", {icon: 3})
        setTimeout(function () {
            location.href = "shopping/index";
        }, 3000);
    }
    let total=0;
    let totalnumber=0;
    for (let i = 0; i < proidArr.length; i++) {
        let proid = proidArr[i];
        let count = countArr[i];
        $.ajax({
            url: 'product/getproduct',
            data: {id: proid},
            async: false,
            success: function (result) {
                let data = result.data;
                let item = $("#productitem").text();
                let $item = $(item);
                $item.find("[name='id']").val(data.id);
                $item.find("[easy='proimg']").attr("src", data.imgurl);
                $item.find("[easy='proname']").text(data.name);
                $item.find("[easy='proprice']").text(data.price);
                $item.find("[easy='pronumber']").val(count);
                $item.find("[easy='subtotal']").text(Number(data.price) * Number(count)+"元");
                total+=(Number(data.price) * Number(count));
                totalnumber+=Number(count);
                $("#products").append($item);
            }
        });
    }
    $("[easy='total']").text(total);
    $("[easy='totalnumber']").text(totalnumber);
    let selectedAddressID = 0;
    //选择收货地址
    $("[name='addressbox']").on("click", "[easy='address']", function () {
        $("[easy='address']").css("background-color", "#fff");
        $(this).css("background-color", "#8cbf5e");
        selectedAddressID =$(this).attr("addressid");
    });

    //数量发生变化
    $("[easy='pronumber']").change(function(){
        let number=$(this).val();
        let price=$(this).parents("[easy='proitem']").find("[easy='proprice']").text();
        if(number<1){
            $(this).val(1);
        }
        if(number>99){
            $(this).val(99);
        }
        number=$(this).val();
        let subtotal=Number(number)*Number(price);
        $(this).parents("[easy='proitem']").find("[easy='subtotal']").text(subtotal+"元");
        total=0
        totalnumber=0;
        $("[easy='proitem']").each(function(idex,item){
            let number=$(item).find("[easy='pronumber']").val();
            let price=$(item).find("[easy='proprice']").text();
            total+=(Number(price) * Number(number));
            totalnumber+=Number(number);
        });
        $("[easy='total']").text(total);
        $("[easy='totalnumber']").text(totalnumber);
    })
    //结算
    $("#jiesuanBtn").click(function(){
        $(this).prop("disabled",false);
        let formdata={
            id:[],
            number:[]
        };
        $("[name='id']").each(function(index,item){
            formdata.id.push($(item).val());
        });

        $("[name='number']").each(function(index,item){
            formdata.number.push($(item).val());
        });

        formdata.addressid=selectedAddressID;
        //向后台传递的参数有
        //1  要购买的商品的id
        //2  要购买商品的数量
        //3  选中的收货地址的id
        $.ajax({
            url:"order/add",
            data:formdata,
            success:function(result){
                console.log(result);
                let code=result.code;
                let data=result.data;
                let msg=result.msg;
                if(code==200){
                    location.href="shopping/payment?id="+data;
                }else{
                    layer.msg("订单创建失败",{icon:2});
                }
            }
        });
    });
</script>
</body>
</html>